<template>
	<view>
		<u-navbar :is-back="true" :is-fixed="true" title="涉农主体详情"></u-navbar>
		<view class="fixed-top bg-white" style="margin-top: 44px;">
			<view class="dfes pl-3 pr-3 mt-2">
				<view class="text-BD3124">三亚芒果农业有限公司</view>
				<view class="ml-2 bg-F5C9C5 text-BD3124 pl-1 pr-1 rounded p">异常</view>
			</view>
			<view class="dfes mt-2 ml-3 mr-3">
				<view class="mr-2 p font-12 rounded  bg-FCE07F">
					<view class="text-FFC251">澄迈</view>
				</view>
				<view class="mr-2 p font-12 rounded  bg-FCE07F">
					<view class="text-FFC251">澄迈</view>
				</view>
			</view>

			<view class="px-3 tab-item" v-for="(item,index) in tabBars" :id="'tab'+index" @click="changeTab(index)"
				:key="index">
				<view class="font-16 dfex" :class="tabIndex === index ? 'text-8ED0F2 active':''">
					{{item.name}}
				</view>
			</view>
			<u-gap height="20" bg-color="#f7f7f7"></u-gap>
		</view>

		<view style="margin-top: 120px;">
			<!-- 	<swiper :current="tabIndex" @change="onChangeTab" style="height: 100vh;">
				<swiper-item> -->
			<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px);" :show-scrollbar="false">
				<view class="" v-if="tabIndex === 0">
					<u-field v-model="mobile" :border-bottom="false" label="企业名称：" label-width="150" :disabled="true"
						:field-style="placeholderStyles">
					</u-field>
					<u-field v-model="mobile" :border-bottom="false" label="手机号：" label-width="130" :disabled="true"
						:field-style="placeholderStyle"></u-field>

					<u-field v-model="mobile" :border-bottom="false" label="统一信用代码：" label-width="200" :disabled="true"
						:field-style="placeholderStyle"></u-field>

					<u-field v-model="mobile" :border-bottom="false" :disabled="true" label-width="150" label="注册资本："
						:field-style="placeholderStyle"></u-field>

					<u-field v-model="mobile" :border-bottom="false" :disabled="true" label="类型：" label-width="90"
						:field-style="placeholderStyle"></u-field>
					<u-field v-model="mobile" :border-bottom="false" label="法定代表人：" :disabled="true" label-width="170"
						:field-style="placeholderStyle">
					</u-field>
					<u-field v-model="mobile" :border-bottom="false" label="成立日期：" label-width="140" :disabled="true"
						:field-style="placeholderStyle"></u-field>

					<u-field v-model="mobile" :border-bottom="false" label="营业期限：" label-width="140" :disabled="true"
						:field-style="placeholderStyle"></u-field>

					<u-field v-model="mobile" :border-bottom="false" :disabled="true" label="主体地址：" label-width="140"
						:field-style="placeholderStyle"></u-field>

					<u-field v-model="mobile" :border-bottom="false" :disabled="true" label="经营范围：" label-width="140"
						:field-style="placeholderStyle"></u-field>
					<u-field v-model="mobile" :border-bottom="false" label-width="140" :disabled="true" label="注册时间："
						:field-style="placeholderStyle"></u-field>
				</view>
				<view class="" v-if="tabIndex === 1">
					<view v-for="(item, index) in 2" class="mb-5">
						<u-field v-model="mobile" :border-bottom="false" label="基地名称：" :disabled="true"
							:field-style="placeholderStyle" label-width="160">
						</u-field>
						<u-field v-model="mobile" :border-bottom="false" label="联系人：" :disabled="true"
							:field-style="placeholderStyle" label-width="120"></u-field>

						<u-field v-model="mobile" :border-bottom="false" label="联系电话：" :disabled="true"
							:field-style="placeholderStyle" label-width="140"></u-field>

						<u-field v-model="mobile" :border-bottom="false" :disabled="true" label="基地位置："
							:field-style="placeholderStyle" label-width="140"></u-field>

						<u-field v-model="mobile" :border-bottom="false" :disabled="true" label="基地面积(m²)："
							:field-style="placeholderStyle" label-width="200"></u-field>
						<u-field v-model="mobile" :border-bottom="false" label="基地产品介绍：" :disabled="true"
							:field-style="placeholderStyles" label-width="200">
						</u-field>
						<view class="flex-y pl-3">
							<view>基地图片:</view>
							<image style="width: 142px; height: 100px; left:20px;" src="../../../static/logo.png"
								mode=""></image>
						</view>

					</view>
				</view>
				<view class="" v-if="tabIndex === 2">
					<view class="px-3 tab-item" v-for="(item,index) in tabBar" :id="'tab'+index"
						@click="changeTabs(index)" :key="index">
						<view class="font-16 dfex" :class="tabBarIndex === index ? 'text-8ED0F2 active':''">
							{{item.name}}
						</view>
					</view>
					<view v-if="tabBarIndex === 0">
						<view>
							<u-field v-model="mobile" :border-bottom="false" label="产品名称：" :disabled="true"
								label-width="160">
							</u-field>
							<u-field v-model="mobile" :border-bottom="false" label="基地名称：" :disabled="true"
								label-width="160"></u-field>
						</view>
					</view>
					<view v-if="tabBarIndex === 1">
						<view>
							<u-field v-model="芒果" :border-bottom="false" label="产品名称：" :disabled="true"
								label-width="160">
							</u-field>
							<u-field v-model="三亚" :border-bottom="false" label="基地名称：" :disabled="true"
								label-width="160"></u-field>
						</view>
					</view>
				</view>
				<view class="" v-if="tabIndex === 3">
					<view class="flex-y pl-3 py-2 pr-3">
						<view>营业执照：</view>
						<image style="width: 142px; height: 100px;" src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="flex-y pl-3 py-2 pr-3">
						<view>商标证明：</view>
						<image style="width: 142px; height: 100px;" src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="flex-y pl-3 py-2 pr-3">
						<view>专利证明：</view>
						<image style="width: 142px; height: 100px;" src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="flex-y pl-3 py-2 pr-3">
						<view>行政许可执照：</view>
						<image style="width: 142px; height: 100px;" src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="flex-y pl-3 py-2 pr-3">
						<view>涉农认证证书：</view>
						<image style="width: 142px; height: 100px;" src="../../../static/logo.png" mode=""></image>
					</view>

				</view>
				<view class="icon-hao iconfont pl-3 pr-3 mt-5  bg-F5C9C5 text-BD3124 ml-3 mr-3 py-1 rounded-10  "> <text
						class="font-14 pl-2">该品牌企业已被加入黑名单！</text></view>
			</scroll-view>
			<!-- </swiper-item>
			</swiper> -->
		</view>
	</view>
</template>

<script>
	import ferrButton from "@/components/free-ui/ferr-button.vue";
	import freeConfirm from "@/components/free-ui/free-confirm.vue";
	import $H from '@/common/free-lib/request.js';
	import $U from "@/common/free-lib/util.js";
	
	export default {
		components: {
			ferrButton,
			freeConfirm
		},
		data() {
			return {
				mobile: '测试奢侈',
				placeholderStyle: {
					color: '#999'
				},

				labelStyle: {
					paddingLeft: '13px',
					width: '130px'
				},
				form: {
					name: '',
					intro: ''
				},
				scrollinto: "",
				tabIndex: 0,
				keyword: '',
				actionStyle: {
					color: '#8ED0F2'
				},
				tabBars: [{
						"id": 1,
						"name": "主体信息",
						"template": "new"
					},
					{
						"id": 2,
						"name": "基地信息",
						"template": "tit"
					},
					{
						"id": 3,
						"name": "产品信息",
						"template": "tit"
					},
					{
						"id": 4,
						"name": "证件信息",
						"template": "tit"
					},
				],
				tabBarIndex: 0,
				tabBar: [{
						"id": 1,
						"name": "芒果",
						"template": "new"
					},
					{
						"id": 2,
						"name": "产品分类",
						"template": "tit"
					},
				],
				userInfo:{

				}

			}


		},
		computed: {


		},
		onLoad(options) {
			this.getUserInfo();
		}

		methods: {
			changeTab(index) {
				if (this.tabIndex === index) return;
				this.tabIndex = index;
				this.scrollinto = "tab" + index;
			},
			// Handle tab change event
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},
			changeTabs(index) {
				if (this.tabBarIndex === index) return;
				this.tabBarIndex = index;
				this.scrollinto = "tab" + index;
			},
			getUserInfo(){
				uni.showLoading({
					title: '加载中'
				});
				const userId = $U.getStorage("id");

				if(!userId){
					uni.showToast({
							title: "请重新登录",
							icon: "error",
						});
				}

				$H.get(
					"/brand/user/queryById", {
						id:userId,
					}, {}
				).then((res) => {
					if (!res.success) {
						uni.showToast({
							title: "未查询到相关信息",
							icon: "none",
						});
						return;
					}
					this.userInfo = res.result;
					this.userInfo.fullAvatar = $H.getFullImageUrl(res.result.businessLicense);
					this.userInfo.natureBusinessText = this.natureBusinessMap[res.result.natureBusiness];
					uni.hideLoading();
				}).catch(error=>{
					console.error('请求出错', error); // 处理任何错误
					uni.showToast({
							title: "查询错误",
							icon: "none",
						});
					uni.hideLoading();
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-scroll {
		width: 100vw;
	}


	.tab-item {
		margin-left: 2px;
		display: inline-block;
		text-align: center;
		padding: 0 13px;
		line-height: 40px;

	}

	.active {
		border-bottom: 2px solid #8ED0F2;
	}
</style>